<template>
  <div>
    <!-- 提示栏 -->
    <el-row class="hint-area mar-b-20" v-show="hintVisible">
      <el-col :span="18">
        <span class="pad-l-20">主播成交订单数、成交订单金额根据系统当前已同步平台的订单按「账号ID」和「订单里商品的主播佣金」进行匹配统计，可前往平台订单同步最新数据。</span>
        <el-button type="text" @click="doLinkPlatformOrder">立即前往</el-button>
      </el-col>
      <el-col :span="6" align="right">
        <el-button type="info" icon="el-icon-close" class="hint-icon" circle @click="doCloseHint"></el-button>
      </el-col>
    </el-row>
    <!-- 主播码按钮 -->
    <div>
      <el-button @click="codeVisible = true" class="open-btn" type="primary">总部招募主播码</el-button>
    </div>
    <!-- 搜索操作栏 -->
    <div class="top-operate-default mar-t-20">
      <div class="search-item">
        <label>搜索主播：</label>
        <el-select v-model="textCol" class="select-width">
          <el-option label="微客昵称" value="nickname"></el-option>
          <el-option label="微客手机号" value="phone"></el-option>
          <el-option label="微信号" value="wechatNo"></el-option>
          <el-option label="抖音主播ID号" value="douYinNo"></el-option>
          <el-option label="快手主播ID号" value="kuaiShouNo"></el-option>
          <el-option label="一级合伙人昵称" value="onePartnerName"></el-option>
          <el-option label="一级合伙人手机号" value="onePartnerPhone"></el-option>
          <el-option label="二级合伙人昵称" value="twoPartnerName"></el-option>
          <el-option label="二级合伙人手机号" value="twoPartnerPhone"></el-option>
          <el-option label="招募员昵称" value="recruiterName"></el-option>
          <el-option label="招募员手机号" value="recruiterPhone"></el-option>
          <el-option label="店主昵称" value="memberShopName"></el-option>
          <el-option label="店主手机号" value="memberShopPhone"></el-option>
        </el-select>
        <el-input v-model="textValue" placeholder="请输入搜索内容" style="width: 200px;"></el-input>
        <label class="mar-l-20">时间筛选：</label>
        <el-select v-model="timeCol" class="time-select">
          <el-option label="订单成交时间" value="orderFinishTime"></el-option>
          <el-option label="主播创建时间" value="passTime"></el-option>
        </el-select>
        <el-date-picker v-model="dateTimePicker" type="datetimerange" unlink-panels range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" :default-time="['00:00:00', '23:59:59']"
          start-placeholder="开始时间" end-placeholder="结束时间">
        </el-date-picker>
        <label class="mar-l-20">开通方式：</label>
        <el-select v-model="defaultQuery.source" clearable class="select-width">
          <el-option v-for="(item, key) in dict.source" :key="key" :label="item" :value="key"></el-option>
        </el-select>
        <el-button-group class="mar-l-20">
          <el-button type="primary" @click="doSearch">查询</el-button>
          <el-button plain="" @click="doResetSearch">重置</el-button>
        </el-button-group>
      </div>
    </div>
    <!-- 全选操作栏 -->
    <div class="pad-t-15 pad-b-15 font-14 v-align-c">
      <el-checkbox class="mar-l-15 mar-r-0" v-model="checkedAll" @change="doSelectAll"><span
          class="mar-l-20">当页全选</span></el-checkbox>
      <span class="pad-l-4 pad-r-4">|</span>
      <div class="width-80">已选{{multipleSelection.length}}项</div>
      <el-button class="mar-l-5" @click="doExport">批量导出</el-button>
    </div>
    <!-- 内容列表 -->
    <div class="tab-container">
      <div class="c-table" v-loading="listLoading" element-loading-text="加载中">
        <div class="c-table__head">
          <div class="c-table__td goods-info">带货渠道</div>
          <div class="c-table__td">账号ID</div>
          <div class="c-table__td">开通时间</div>
          <div class="c-table__td">开通方式</div>
          <div class="c-table__td">成交订单数</div>
          <div class="c-table__td">成交订单金额</div>
          <div class="c-table__td">主播收入</div>
          <!--          <div class="c-table__td">授信额度</div> -->
          <div class="c-table__td text-align-r">操作</div>
        </div>
        <div class="c-table__body">
          <div class="c-table__row" v-for="(item, index) in dataList" :key="index">
            <div class="c-row__head">
              <div class="c-row__left">
                <div class="c-table__td select">
                  <el-checkbox v-model="item.checked" @change="doSelect" />
                </div>
                <img :src="item.avatar" alt="" class="width-38 height-38">
                <div class="align-l mar-l-10">
                  <div style="line-height:1.4;"><span class="font-color-9">昵称：</span>{{ item.nickname }}</div>
                  <div style="line-height:1.4;"><span class="font-color-9">手机：</span>{{ item.phone }}</div>
                </div>
                <div class="mar-l-30">
                  <span v-if="item.source == 2">【{{ item.onePartnerName }}】&nbsp;{{ item.onePartnerPhone }}</span>
                  <span v-if="item.source == 3">【{{ item.twoPartnerName }}】&nbsp;{{ item.twoPartnerPhone }}</span>
                  <span v-if="item.source == 4">【{{ item.recruiterName }}】&nbsp;{{ item.recruiterPhone }}</span>
                  <span v-if="item.source == 5">【{{ item.memberShopName }}】&nbsp;{{ item.memberShopPhone }}</span>
                </div>
                <div class="mar-l-30">
                  <span class="font-color-9">合计主播收入：</span>
                  <span style="color: orange;">￥{{ item.anchorTotalIncome }}</span>
                </div>
                <div class="mar-l-30">
                  <span class="font-color-9">授信类型：</span>
                  <span style="color: blue;" v-if="item.creditType">{{ creditTypeList[item.creditType] }}</span>
                  <span style="color: red;" v-else>未选择授信类型</span>
                </div>
                <div class="mar-l-30" v-if="item.creditType === 2 ">
                  <span class="font-color-9">最高额度：</span>
                  <span style="color: blue;">￥{{item.highestQuota ? item.highestQuota : '0.00'}}</span>
                </div>
                <div class="mar-l-30" v-if="item.creditType === 2 ">
                  <span class="font-color-9">已用额度：</span>
                  <span style="color: blue;">￥{{item.usedQuota ? item.usedQuota : '0.00'}}</span>
                </div>
                <div class="mar-l-30" v-if="item.creditType === 2 ">
                  <span class="font-color-9">剩余额度：</span>
                  <span
                    style="color: blue;">￥{{item.highestQuota ? item.highestQuota - (item.usedQuota ? item.usedQuota : '0.00') : '0.00' }}</span>
                </div>
              </div>
              <div class="c-row__right">
                <el-button type="text" @click="bindSubUser(item)">设置</el-button>
                <el-button type="text" @click="doClearAnchor(item)">清退</el-button>
                <el-button type="text" @click="setHighestQuotaShow(item)">设置授信额度</el-button>
              </div>
            </div>
            <div class="c-table__tr" v-for="(sub_item, sub_index) in item.relationPlatformList" :key="sub_index">
              <div class="c-table__td v-align-c">
                <!-- 微信 -->
                <img v-if="sub_item.relationPlatform === 1" :src="iconWechat" alt="" class="width-16 height-16 mar-r-5">
                <span v-if="sub_item.relationPlatform === 1">微信</span>
                <!-- 抖音 -->
                <img v-if="sub_item.relationPlatform === 2" :src="iconDouyin" alt="" class="width-16 height-16 mar-r-5">
                <span v-if="sub_item.relationPlatform === 2">抖音</span>
                <!-- 快手 -->
                <img v-if="sub_item.relationPlatform === 3" :src="iconKuaishou" alt=""
                  class="width-16 height-16 mar-r-5">
                <span v-if="sub_item.relationPlatform === 3">快手</span>
              </div>
              <div class="c-table__td">{{ sub_item.relationNo }}</div>
              <div class="c-table__td">{{ sub_item.passDate }}</div>
              <div class="c-table__td">{{ dict.source[sub_item.source] }}</div>
              <div class="c-table__td">{{ sub_item.orderTotalNum }}</div>
              <div class="c-table__td">￥{{ sub_item.orderTotalAmount }}</div>
              <div class="c-table__td">￥{{ sub_item.anchorIncome }}</div>
              <div class="c-table__td">
                <el-button type="text" @click="goApplyDetailMesg(item,sub_item)">申请详情</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="searchListQuery.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 云店申请码弹窗 -->
    <el-dialog title="总部招募主播码" class="code-area-box" :visible.sync="codeVisible" width="340px" :show-close="false"
      :close-on-click-modal="true">
      <div class="code-box">
        <img :src="anchorWxaCode" v-if="anchorWxaCode" />
      </div>
      <div slot="footer" class="dialog-footer">
        <p>用微信"扫一扫" 扫描上方二维码</p>
        <p>申请主播身份</p>
      </div>
    </el-dialog>

    <!-- 提示关闭弹窗 -->
    <el-dialog title="确认操作" width="500px" v-el-drag-dialog :visible.sync="hintOperateVisible">
      <el-radio-group v-model="hintRadio">
        <el-radio label="0">今天不再显示</el-radio>
        <el-radio label="1">我已深知该业务功能配置，不再显示</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hintOperateVisible = false">取消</el-button>
        <el-button type="primary" @click="doSaveHint">确定</el-button>
      </div>
    </el-dialog>
    <!--设置账号-->
    <el-dialog title="设置账号" :visible.sync="setSubUserVisible" :close-on-press-escape="true" width="550px">
      <el-form :model="subUser" label-width="150px" :rules="rules" ref="subUser">
        <el-form-item label="昵称" prop="nickname">
          <div>{{subUser.nickname}}</div>
        </el-form-item>
        <el-form-item label="操作员姓名" prop="username">
          <div>
            <el-input v-model="subUser.username" placeholder="请输入操作员姓名" style="width: 300px"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="登录手机号" prop="phone">
          <div>
            <el-input v-model="subUser.phone" type="tel" placeholder="请输入手机号" maxlength="11"
              oninput="this.value=this.value.replace(/^[0,2,3,4,5,6,7,8,9]*$/gi,'')"
              onkeyup="this.value=this.value.replace(/\D/g,'')" style="width: 300px" :disabled="phoneFlag"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="所属角色" prop="subRoleId">
          <div>
            <el-select v-model="subUser.subRoleId" placeholder="请选择">
              <el-option v-for="(item, index) in subRoleList" :key="item.subRoleId" :label="item.name"
                :value="item.subRoleId" />
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="statusFlag" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
          <span v-if="statusFlag" style="color: #AAAAAA">(已启用)</span>
          <span v-if="!statusFlag" style="color: #AAAAAA">(已禁用)</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setSubUserVisible = false">取消</el-button>
        <el-button type="primary" @click="doBindSubUser">保存</el-button>
      </div>
    </el-dialog>

    <!--设置授信额度-->
    <el-dialog title="设置授信额度" :visible.sync="setHighestQuotaVisible" :close-on-press-escape="true" width="460px">
      <div style="margin-left: 55px">
        <span style="font-size: 16px">授信类型：</span>
        <el-radio v-model="setHighestQuotaInfo.creditType" label="1" @change="creditTypeChange">即时付款</el-radio>
      </div>
      <div style="margin-left: 140px; margin-top: 10px">
        <el-radio v-model="setHighestQuotaInfo.creditType" label="2" @change="creditTypeChange">额度授信</el-radio>
        <el-input style="width: 250px; margin-top: 10px" placeholder="请输入最高额度"
          v-model="setHighestQuotaInfo.highestQuota" :disabled="highestQuotaShow"
          @keyup.native="setHighestQuotaInfo.highestQuota = checkInputNum(setHighestQuotaInfo.highestQuota)"
          size="mini"><template slot="append">元</template></el-input>
        <div class="config-tip font-12 font-color-9">
          最高额度必须大于等于0,
          <el-tooltip placement="top">
            <div slot="content">
              当前最高额度: ￥{{ setHighestQuotaInfo.highestQuota ? setHighestQuotaInfo.highestQuota : '0.00' }}<br />
              已使用额度: ￥{{ setHighestQuotaInfo.usedQuota ? setHighestQuotaInfo.usedQuota : '0.00' }}<br />
              当前可用额度:
              ￥{{ setHighestQuotaInfo.highestQuota && setHighestQuotaInfo.usedQuota ? setHighestQuotaInfo.highestQuota - setHighestQuotaInfo.usedQuota : '0.00' }}<br />
            </div>
            <i class="el-icon-info">查看当前额度</i>
          </el-tooltip>
        </div>
      </div>
      <div style="margin-left: 140px; margin-top: 10px">
        <el-radio v-model="setHighestQuotaInfo.creditType" label="3" @change="creditTypeChange">不限额度</el-radio>
        <div class="config-tip font-12 font-color-9">选用不限额度可能导致不可控的分销商欠款，谨慎使用！</div>
      </div>
      <div slot="footer" class="dialog-footer pad-t-20">
        <el-button type="primary" @click="setHighestQuotaType">保存</el-button>
        <el-button @click="setHighestQuotaVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 申请详情 弹窗 -->
    <apply-detail ref="applyDetail"></apply-detail>
  </div>
</template>

<script>
  import {
    updateBatchStatus,
    pagingAnchorManage,
    doExportAnchorManage,
    getAnchorManageHint,
    doGetAnchorWxaCode,
    updateAnchorManageHint
  } from '@/api/user/memberRoleAuthority'
  import elDragDialog from '@/directive/el-dragDialog'
  import iconDouyin from '@/assets/images/icon-douyin.png'
  import iconKuaishou from '@/assets/images/icon-kuaishou.png'
  import iconWechat from '@/assets/images/icon-wechat.png'
  import {
    doBindSubUser,
    getBindSubUser,
    doSetHighestQuota
  } from '@/api/user/member'
  import {
    listEnterpeiseRole
  } from '@/api/system/role'
  import {
    getDictByGroupName
  } from '@/api/common/common'
  import ApplyDetail from '../apply-detail'

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    components: {
      ApplyDetail
    },
    data() {
      return {
        // 文本model
        textCol: 'nickname',
        textValue: '',
        // 日期model
        timeCol: 'orderFinishTime',
        dateTimePicker: [],
        // 默认条件
        defaultQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: '',
          source: '',
          authorityStatus: 1,
          memberRoleType: 2 // 微客角色类型：1-批发商，2-主播
        },
        // 查询条件
        searchListQuery: {},
        // 数据字典
        dict: {
          applyType: {}
        },
        // 日期组件
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        // 图标图片
        iconDouyin: iconDouyin,
        iconKuaishou: iconKuaishou,
        iconWechat: iconWechat,
        // 提示radio
        hintRadio: '0',
        // 提示栏visible
        hintVisible: false,
        // 提示操作visible
        hintOperateVisible: false,
        // 招募码弹窗
        codeVisible: false,
        // 主播招募二维码
        anchorWxaCode: '',
        // 全选model
        checkedAll: false,
        // 主播表单
        anchorForm: {
          anchorAuthorityId: '',
          enterpriseId: '',
          memberId: '',
          nickname: '',
          phone: '',
          avatar: '',
          wechatNo: '',
          douYinNo: '',
          kuaiShouNo: ''
        },
        listLoading: false,
        total: 0,
        dataList: [],
        multipleSelection: [],
        setSubUserVisible: false,
        subUser: {},
        subRoleList: [],
        phoneFlag: false,
        statusFlag: false,
        rules: {
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          subRoleId: [{
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '请输入操作员姓名',
            trigger: 'blur'
          }]
        },
        creditTypeList: [],
        setHighestQuotaInfo: {
          memberId: '',
          creditType: 1,
          highestQuota: 0,
          usedQuota: 0
        },
        highestQuotaShow: true,
        setHighestQuotaVisible: false
      }
    },
    // 初始化页面
    created() {
      Object.assign(this.searchListQuery, this.defaultQuery)
      // 获取企业主播管理提示 0: 关闭  1：开启
      getAnchorManageHint(this.getEnterpriseId()).then(response => {
        if (response.isError) return
        this.hintVisible = response.data === 1
      })
      // 获取企业总部招募主播码
      doGetAnchorWxaCode(this.getEnterpriseId()).then(response => {
        if (response.isError) return
        this.anchorWxaCode = response.data
      })
      this.listEnterpriseRole()
      this.initList()
    },
    methods: {
      // 初始化
      initList() {
        this.setQueryCondition()
        this.checkedAll = false
        this.multipleSelection = []
        this.listLoading = true
        pagingAnchorManage(this.searchListQuery).then(response => {
          if (response.isError) return
          this.listLoading = false
          this.dict = response.data.dict
          this.total = response.data.total
          this.dataList = response.data.records
          this.dataList.forEach(e => this.$set(e, 'checked', false))
        })
        getDictByGroupName('MemberDTO.creditType').then(response => {
          this.creditTypeList = response.data.creditType
        })
      },
      // 显示申请详情弹窗
      goApplyDetailMesg(item, relationPlatformInfo) {
        this.$nextTick(() => {
          this.$refs.applyDetail.setData(item, relationPlatformInfo)
          this.$refs.applyDetail.open()
        })
      },
      // 设置查询条件
      setQueryCondition() {
        const size = this.searchListQuery.size
        const currentPage = this.searchListQuery.currentPage
        this.searchListQuery = {
          ...this.defaultQuery
        }
        this.searchListQuery.size = size
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery[this.textCol] = this.textValue
        this.searchListQuery.dateColumn = this.timeCol
        this.searchListQuery.startDate = (this.dateTimePicker && this.dateTimePicker.length > 0) ? this.dateTimePicker[
          0] : ''
        this.searchListQuery.endDate = (this.dateTimePicker && this.dateTimePicker.length > 1) ? this.dateTimePicker[
          1] : ''
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.anchorAuthority = 1
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.textCol = originData.textCol
        this.textValue = originData.textValue
        this.timeCol = originData.timeCol
        this.dateTimePicker = originData.dateTimePicker
        this.defaultQuery = originData.defaultQuery
        this.doSearch()
      },
      // 跳转至平台订单
      doLinkPlatformOrder() {
        this.$router.push({
          path: '/order/order/platform-third'
        })
      },
      // 保存提示设置
      doSaveHint() {
        updateAnchorManageHint(this.getEnterpriseId(), this.hintRadio).then((response) => {
          if (response.isError) return
          this.hintVisible = false
          this.hintOperateVisible = false
        })
      },
      // 关闭提示点击弹窗
      doCloseHint() {
        this.hintRadio = '0'
        this.hintOperateVisible = true
      },
      // 单选事件
      doSelect() {
        const isAll = this.dataList.findIndex(item => {
          return item.checked === false
        })
        if (isAll === -1) {
          this.checkedAll = true
          this.multipleSelection = this.$utils.deepClone(this.dataList)
        } else {
          this.checkedAll = false
          const list = this.dataList.filter(item => item.checked === true)
          this.multipleSelection = list
        }
      },
      // 全选事件
      doSelectAll(val) {
        if (val) {
          this.dataList.forEach(item => {
            item.checked = true
          })
          this.multipleSelection = this.$utils.deepClone(this.dataList)
        } else {
          this.dataList.forEach(item => {
            item.checked = false
          })
          this.multipleSelection = []
        }
      },
      // 清退事件
      doClearAnchor(row) {
        this.$confirm('是否确认清退该主播？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          var roleAuthorityIds = []
          var memberIds = []
          memberIds.push(row.memberId)
          updateBatchStatus(this.getEnterpriseId(), this.defaultQuery.memberRoleType, roleAuthorityIds, memberIds,
            100, null, '手动清退主播').then(response => {
            if (response.isError) {
              this.listLoading = false
              return
            }
            this.$message({
              type: 'success',
              message: response.msg
            })
            this.doSearch()
          })
          // doClear(row.anchorAuthorityId).then(response => {
          //   if (response.isError) {
          //     this.listLoading = false
          //     return
          //   }
          //   this.$message({
          //     type: 'success',
          //     message: '清退成功'
          //   })
          //   this.doSearch()
          // })
        }).catch(() => {
          // this.$message({ type: 'info', message: '已取消' })
        })
      },
      listEnterpriseRole() {
        listEnterpeiseRole({
          enterpriseId: this.getEnterpriseId(),
          memberFlag: 1
        }).then(response => {
          if (response.isError) return
          this.subRoleList = response.data
        })
      },
      // 账户信息
      bindSubUser(row) {
        getBindSubUser(row.memberId).then(response => {
          if (response.isError) return
          this.subUser = response.data
          if (response.data.subUserId) {
            this.phoneFlag = true
          } else {
            this.phoneFlag = false
          }
          this.subUser.status = response.data.status
          if (response.data.status === 1) {
            this.statusFlag = true
          } else {
            this.statusFlag = false
          }
          this.subUser.nickname = row.nickname
          this.subUser.memberId = row.memberId
          this.setSubUserVisible = true
        })
      },
      // 设置账户
      doBindSubUser() {
        this.$refs['subUser'].validate((valid) => {
          if (valid) {
            this.subUser.enterpriseId = this.getEnterpriseId()
            this.subUser.status = this.statusFlag ? '1' : '0'
            doBindSubUser(this.subUser).then(response => {
              if (response.isError) return
              this.$message({
                type: 'success',
                message: '成功!'
              })
              this.setSubUserVisible = false
            })
          }
        })
      },
      // 导出事件
      doExport() {
        let exportForm = {}
        let message
        if (this.multipleSelection && this.multipleSelection.length > 0) {
          const roleAuthorityIds = []

          this.multipleSelection.forEach(e => {
            if (e.relationPlatformList !== undefined && e.relationPlatformList.length > 0) {
              e.relationPlatformList.forEach(item => {
                roleAuthorityIds.push(item.roleAuthorityId)
              })
            }
          })
          exportForm = {
            enterpriseId: this.getEnterpriseId(),
            roleAuthorityIds: roleAuthorityIds
          }
          message = '是否确认导出当前勾选的' + roleAuthorityIds.length + '条数据？'
        } else {
          if (this.dataList.length <= 0) {
            this.msgError('暂无可导出数据')
            return
          }
          this.setQueryCondition()
          exportForm = this.searchListQuery
          message = '是否确认导出当前筛选条件下的所有数据？'
        }
        this.$confirm(message, '批量导出', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          window.open(doExportAnchorManage(exportForm), '_blank')
        }).catch(() => {
          // this.$message({ type: 'info', message: '已取消' })
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      },
      // 打开设置授信额度窗口
      setHighestQuotaShow(row) {
        if (!row.memberId) {
          this.$message.error('请先设置主播为微客')
          return
        }
        this.setHighestQuotaInfo.memberId = row.memberId
        this.setHighestQuotaInfo.creditType = row.creditType ? row.creditType.toString() : '1'
        this.setHighestQuotaInfo.highestQuota = row.highestQuota ? row.highestQuota : '0'
        this.setHighestQuotaInfo.usedQuota = row.usedQuota ? row.usedQuota : '0'
        this.highestQuotaShow = this.setHighestQuotaInfo.creditType === '1' || this.setHighestQuotaInfo.creditType ===
          '3'
        this.setHighestQuotaVisible = true
      },
      creditTypeChange() {
        // 授信类型 1- 即时付款 2- 额度授信 3- 不限额度
        if (this.setHighestQuotaInfo.creditType === '1' || this.setHighestQuotaInfo.creditType === '3') {
          this.highestQuotaShow = true
        } else {
          this.highestQuotaShow = false
        }
      },
      setHighestQuotaType() {
        if (this.setHighestQuotaInfo.creditType === '1') {
          this.saveHighestQuotaInfo()
          return
        }
        // 如果选择2- 额度授信,要检查highestQuota>0 新的最高额度不能低于已使用额度，请重新设置。
        if (this.setHighestQuotaInfo.creditType === '2') {
          if (!this.setHighestQuotaInfo.highestQuota) {
            this.$message.error('选择额度授信,需输入最高额度')
            return
          }
          if (Number(this.setHighestQuotaInfo.highestQuota) < Number(this.setHighestQuotaInfo.usedQuota)) {
            this.$message.error('最高额度需大于已使用额度(' + this.setHighestQuotaInfo.usedQuota + ')元')
            return
          }
          this.saveHighestQuotaInfo()
          return
        }
        // 如果选择3- 不限额度 弹出二次确认框 选用“不限额度”授信类型，可能导致不可控的分销商欠款，确定继续选用？  继续选用 取消
        if (this.setHighestQuotaInfo.creditType === '3') {
          this.$confirm('选用“不限额度”授信类型，可能导致不可控的分销商欠款，确定继续选用？', '提示', {
            confirmButtonText: '继续选用',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.saveHighestQuotaInfo()
          }).catch(() => {})
          return
        }
      },
      // 保存额度授信配置
      saveHighestQuotaInfo() {
        doSetHighestQuota(this.setHighestQuotaInfo).then(response => {
          if (response.isError) return
          this.initList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          setTimeout(() => {
            this.setHighestQuotaVisible = false
          }, 20)
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .select-width {
    /deep/ .el-input {
      width: 160px;
    }
  }

  .hint-area {
    background-color: #fff7cc;
    height: 45px;
    line-height: 45px;

    .hint-icon {
      padding: 1px;
      margin: 10px 10px 0 0;
    }
  }

  .el-radio-group {
    padding-left: 5%;

    .el-radio {
      padding-top: 15px;
      display: block;
    }
  }

  .code-area-box {
    /deep/ .el-dialog {
      background: #409eff;
      border-radius: 10px;
    }

    /deep/ .el-dialog__title {
      color: #fff;
      font-size: 500;
    }

    .code-box {
      width: 90%;
      margin: 0 auto;
      text-align: center;
      border-radius: 10px;
      background: #ffffff;
      padding: 30px;

      img {
        width: 90%;
      }
    }

    .dialog-footer {
      color: #fff;
      text-align: center;

      p {
        margin: 0;
      }
    }
  }

  .open-btn {
    height: 38px;
    line-height: 38px;
    padding: 0 10px;
    text-align: center;
  }

  .time-select {
    /deep/.el-input {
      width: 135px
    }
  }

  .el-tabs__item {
    font-size: 20px;
  }

  .c-table {
    overflow: auto;

    .c-table__td {
      // width: 215px;
      flex: 1;
      padding: 0 15px;
      flex-shrink: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .c-table__head {
      // width: fit-content;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 50px;
      background: #f7f8fa;
      color: #333333;
      padding-left: 50px;

      .goods-info {
        width: 300px;
      }

      .select {
        width: 50px;
        flex: unset;
      }

      .text-align-r {
        justify-content: flex-end;
      }

    }

    .c-table__body {

      // width: fit-content;
      .c-table__row {
        .c-row__head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 50px;
          background-color: #f7f8fa;
          border-top: 1px solid #edeff6;
          border-bottom: 1px solid #edeff6;
          margin-top: 15px;
          padding-right: 15px;
        }

        .c-row__left {
          display: flex;
          align-items: center;
          justify-content: left;
          position: relative;
          font-size: 12px;

          img {
            border-radius: 50%;
          }
        }

        .c-table__tr {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #edeff6;
          height: 50px;
          padding-left: 50px;

          &:hover {
            background-color: #f7f8fa;
            cursor: pointer;

            .text-align-r {
              background-color: #f7f8fa;
            }
          }

          &:first-child {
            &:hover {
              background-color: unset;
            }
          }

          .goods-info {
            width: 300px;
          }

          .select {
            width: 50px;
            flex: unset;
          }
        }
      }
    }
  }
</style>
